﻿@model ProductDetailsModel

<div id="product-attributes"></div>
@{
    //dynamic update support
    var attributeChangeScriptsBuilder = new StringBuilder();
    var attributeChangeHandlerFuncName = $"attribute_change_handler_{Model.Id}";
    var fileLink = Url.RouteUrl("UploadFileProductAttribute");
    //generate change event script
    foreach (var attribute in Model.ProductAttributes)
    {
        var controlId = $"product_attribute_{attribute.Id}";
        switch (attribute.AttributeControlType)
        {
            case AttributeControlType.DropdownList:
            {
                attributeChangeScriptsBuilder.Append($"document.querySelector('#{controlId}').addEventListener('change', function (){{{attributeChangeHandlerFuncName}();}});\n");
            }
                break;
            case AttributeControlType.RadioList:
            case AttributeControlType.ColorSquares:
            case AttributeControlType.ImageSquares:
            {
                foreach (var attributeValue in attribute.Values)
                {
                    attributeChangeScriptsBuilder.Append($"document.querySelector('#{controlId}_{attributeValue.Id}').addEventListener('click',function(e){{{attributeChangeHandlerFuncName}();}},false);\n");
                }
            }
                break;
            case AttributeControlType.Checkboxes:
            case AttributeControlType.ReadonlyCheckboxes:
            {
                foreach (var attributeValue in attribute.Values)
                {
                    attributeChangeScriptsBuilder.Append($"document.querySelector('#{controlId}_{attributeValue.Id}').addEventListener('click',function(e){{{attributeChangeHandlerFuncName}();}},false);\n");
                }
            }
                break;
        }
    }

    //render scripts
    <div id="product-attributes">
        <template v-if="standardProductAttributes_@(Model.Id).ProductAttributes !== 'undefined'">
            <div class="attributes">
                <table class="table">
                    <tr v-for="attribute in standardProductAttributes_@(Model.Id).ProductAttributes">
                        <td :id="'product_attribute_label_' + attribute.Id">
                            <span class="attribute-name">{{attribute.Name}}</span> <span v-if="attribute.IsRequired" class="required">*</span>
                            <template v-if="attribute.TextPrompt !==null">
                                <span class="text-prompt">{{attribute.TextPrompt}}</span>
                            </template>
                            <template v-if="attribute.Description !==null">
                                <span v-html="attribute.Description" class="attribute-description"></span>
                            </template>
                        </td>
                        <td :id="'product_attribute_input_' + attribute.Id">
                            <template v-if="attribute.AttributeControlType==4">
                                <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
                                <input :name="'attributes[' + attribute.Id+']'" type="text" class="form-control textbox" :id="'product_attribute_' + attribute.Id" :value="attribute.DefaultValue" @@change="standardProductAttributes_@(Model.Id).attrchange"/>
                            </template>
                            <template v-if="attribute.AttributeControlType==1">
                                <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
                                <select :id="'product_attribute_' + attribute.Id" class="form-control custom-select" :name="'attributes[' + attribute.Id+']'" @@change="standardProductAttributes_@(Model.Id).attrchange">
                                    <template v-if="attribute.IsRequired==false">
                                        <option value="">---</option>
                                    </template>
                                    <option v-for="attributeValue in attribute.Values" :selected="attributeValue.IsPreSelected" :value="attributeValue.Id" :data-disable="attributeValue.Id">
                                        <template v-if="attributeValue.PriceAdjustment==null">
                                            {{attributeValue.Name}}
                                        </template>
                                        <template v-else>
                                            {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
                                        </template>
                                    </option>
                                </select>
                            </template>
                            <template v-if="attribute.AttributeControlType==2">
                                <ul class="option-list px-0 mb-0">
                                    <li v-for="attributeValue in attribute.Values">
                                        <fieldset>
                                            <legend class="sr-only">product_attribute_{{attribute.Id}}</legend>
                                            <label class="custom-control custom-radio">
                                                <input class="custom-control-input"
                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
                                                       type="radio"
                                                       :name="'attributes[' + attribute.Id+']'"
                                                       :value="attributeValue.Id"
                                                       :checked="attributeValue.IsPreSelected"
                                                       :data-disable="attributeValue.Id"
                                                       @@change="standardProductAttributes_@(Model.Id).attrchange"/>
                                                <span class="custom-control-label"></span>
                                                <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
                                                    <template v-if="attributeValue.PriceAdjustment==null">
                                                        {{attributeValue.Name}}
                                                    </template>
                                                    <template v-else>
                                                        {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
                                                    </template>
                                                </span>
                                            </label>
                                        </fieldset>
                                    </li>
                                </ul>
                            </template>
                            <template v-if="attribute.AttributeControlType==3 || attribute.AttributeControlType==50">
                                <fieldset>
                                    <legend></legend>
                                    <ul class="option-list px-0 mb-0">
                                        <li v-for="attributeValue in attribute.Values">
                                            <label class="custom-control custom-checkbox">
                                                <input v-if="attribute.AttributeControlType==50"
                                                       class="custom-control-input"
                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
                                                       type="checkbox"
                                                       :name="'attributes[' + attribute.Id+']'"
                                                       :value="attributeValue.Id"
                                                       :checked="attributeValue.IsPreSelected"
                                                       @@change="standardProductAttributes_@(Model.Id).attrchange"
                                                       disabled="disabled"/>
                                                <input v-else
                                                       class="custom-control-input"
                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
                                                       type="checkbox"
                                                       :name="'attributes[' + attribute.Id+']'"
                                                       :value="attributeValue.Id"
                                                       :checked="attributeValue.IsPreSelected"
                                                       :data-disable="attributeValue.Id"
                                                       @@change="standardProductAttributes_@(Model.Id).attrchange"/>
                                                <span class="custom-control-label"></span>
                                                <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
                                                    <template v-if="attributeValue.PriceAdjustment==null">
                                                        {{attributeValue.Name}}
                                                    </template>
                                                    <template v-else>
                                                        {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
                                                    </template>
                                                </span>
                                            </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </template>
                            <template v-if="attribute.AttributeControlType==10">
                                <textarea :id="'product_attribute_' + attribute.Id" :name="'attributes[' + attribute.Id+']'">{{attribute.DefaultValue}}</textarea>
                            </template>
                            <template v-if="attribute.AttributeControlType==30">
                                <template>
                                    <div :id="'product_attribute_' + attribute.Id + 'uploader'">
                                        <b-form-file :accept="attribute.AllowedFileExtensions"
                                                     type="file"
                                                     id="qqfile"
                                                     name="qqfile"
                                                     :data-url="'@fileLink/' + attribute.Id + '?productId=' + attribute.ProductId"
                                                     @@change="vm.uploadFile($event.target)"/>
                                    </div>
                                </template>
                                <input class="hidden-upload-input"
                                       type="hidden"
                                       :id="'product_attribute_' + attribute.Id"
                                       :name="'attributes[' + attribute.Id+']'"
                                       v-model="attribute.DefaultValue"
                                       :value="attribute.DefaultValue"/>
                                <div id="download-message" class="alert my-2" style="display: none;"></div>
                                <div :id="'product_attribute_' + attribute.Id + 'downloadurl'" class="download-file" style="display: none;">
                                    <a class="btn btn-outline-info"> Download </a>
                                </div>
                            </template>
                            <template v-if="attribute.AttributeControlType==40">
                                <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
                                    <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
                                        <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
                                            <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'attributes[' + attribute.Id+']'" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes_@(Model.Id).attrchange"/>
                                            <template v-if="attributeValue.PriceAdjustment==null">
                                                <span class="color-container" :title="attributeValue.Name">
                                                    <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span>
                                                </span>
                                            </template>
                                            <template v-else>
                                                <span class="color-container" :title="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'">
                                                    <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span>
                                                </span>
                                            </template>
                                        </label>
                                    </li>
                                </ul>
                            </template>
                            <template v-if="attribute.AttributeControlType==45">
                                <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
                                    <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
                                        <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
                                            <template v-if="attributeValue.PriceAdjustment==null">
                                                <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'attributes[' + attribute.Id+']'" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes_@(Model.Id).attrchange"/>
                                                <span :id="'imgSqr_' + attributeValue.Id" class="color-container">
                                                    <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span>
                                                </span>
                                                <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
                                                    <div class="image-square-tooltip">
                                                        <img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name"/> <span>{{attributeValue.Name}}</span>
                                                    </div>
                                                </b-tooltip>
                                            </template>
                                            <template v-else>
                                                <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'attributes[' + attribute.Id+']'" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes_@(Model.Id).attrchange"/>
                                                <span :id="'imgSqr_' + attributeValue.Id" class="color-container">
                                                    <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span>
                                                </span>
                                                <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
                                                    <div class="image-square-tooltip">
                                                        <img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'"/>
                                                        <span>{{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]</span>
                                                    </div>
                                                </b-tooltip>
                                            </template>
                                        </label>
                                    </li>
                                </ul>
                            </template>
                        </td>
                    </tr>
                </table>
            </div>
        </template>
    </div>
    <script asp-location="Footer" asp-order="300">
        var standardProductAttributes_@(Model.Id) = new Vue({
            data: function () {
                return {
                    ProductAttributes: null
                }
            },
            methods: {
                attrchange: function @(attributeChangeHandlerFuncName)() {
                    var form = document.getElementById('@($"product-details-form-{Model.Id}")');
                    var data = new FormData(form);
                    axios({
                        url: '@Html.Raw(Url.Action("productdetails_attributechange", "product", new { productId = Model.Id, loadPicture = true }))',
                        data: data,
                        method: 'post',
                        params: { product: '@Model.Id' },
                    }).then(function (response) {
                        if (response.data.price) {
                            if (document.querySelector('.price-value-@Model.Id .actual-price'))
                                document.querySelector('.price-value-@Model.Id .actual-price').innerText = response.data.price;
                            else
                                document.querySelector('.price-value-@Model.Id').innerText = response.data.price;
                        }
                        if (response.data.sku) {
                            if(document.querySelector('#sku-@Model.Id'))
                                document.querySelector('#sku-@Model.Id').innerText = response.data.sku;
                        }
                        if (response.data.mpn) {
                            if(document.querySelector('#mpn-@Model.Id'))
                                document.querySelector('#mpn-@Model.Id').innerText = response.data.mpn;
                        }
                        if (response.data.gtin) {
                            if(document.querySelector('#gtin-@Model.Id'))
                                document.querySelector('#gtin-@Model.Id').innerText = response.data.gtin;
                        }
                        if (response.data.stockAvailability) {
                            if(document.querySelector('#stock-availability-value-@Model.Id'))
                                document.querySelector('#stock-availability-value-@Model.Id').innerText = response.data.stockAvailability;
                        }
                        if (response.data.outOfStockSubscription) {
                            var element = document.querySelector('#out-of-stock-subscribe-@Model.Id');
                            if (element)
                                element.style.display = "block";
                        }
                        if (response.data.outOfStockSubscription == false) {
                            var element = document.querySelector('#out-of-stock-subscribe-@Model.Id');
                            if (element) {
                                element.style.display = "none";
                            }
                        }
                        if (response.data.buttonTextOutOfStockSubscription) {
                            var element = document.querySelector('#out-of-stock-subscribe-@Model.Id');
                            if (element)
                                element.value = response.data.buttonTextOutOfStockSubscription;
                        }
                        if (response.data.enabledattributemappingids) {
                            for (var i = 0; i < response.data.enabledattributemappingids.length; i++) {
                                document.querySelector('#product_attribute_label_' + response.data.enabledattributemappingids[i]).style.display = "table-cell";
                                document.querySelector('#product_attribute_input_' + response.data.enabledattributemappingids[i]).style.display = "table-cell";
                            }
                        }
                        if (response.data.disabledattributemappingids) {
                            for (var i = 0; i < response.data.disabledattributemappingids.length; i++) {
                                document.querySelector('#product_attribute_label_' + response.data.disabledattributemappingids[i]).style.display = "none";
                                document.querySelector('#product_attribute_input_' + response.data.disabledattributemappingids[i]).style.display = "none";
                            }
                        }
                        @*if (response.data.notAvailableAttributeMappingids) {
                            document.querySelectorAll('[data-disable]').forEach((element) => element.disabled = false);
                            for (var i = 0; i < response.data.notAvailableAttributeMappingids.length; i++) {
                                if (document.querySelectorAll("[data-disable='" + response.data.notAvailableAttributeMappingids[i] + "']").length > 0) {
                                    document.querySelectorAll("[data-disable='" + response.data.notAvailableAttributeMappingids[i] + "']")[0].disabled = true;
                                }
                            }
                        }*@
                        var product = this.product;
                        setTimeout(function () {
                            if (response.data.pictureDefaultSizeUrl) {
                                if (document.querySelector(".product-grouped")) {
                                    document.getElementById('main-product-img-' + product).setAttribute("src", response.data.pictureDefaultSizeUrl);
                                }
                                else {
                                    var active_img_src = vm.$refs.swiperTop.$swiper.slides[vm.$refs.swiperTop.$swiper.activeIndex].querySelector("img").dataset.srcs;
                                    if (!(active_img_src == response.data.pictureDefaultSizeUrl)) {
                                        vm.$refs.swiperTop.$swiper.slides.forEach(function (element, index) {
                                            var img_src = element.querySelector('img').dataset.srcs;
                                            if (img_src == response.data.pictureDefaultSizeUrl) {
                                                vm.$refs.swiperTop.$swiper.slideTo(index, 1000, false)
                                            }
                                        })
                                    }
                                }

                            }
                        }, 100);
                    });
                },
            },
            created() {
                this.ProductAttributes = @Json.Serialize(Model.ProductAttributes);
            }
        });

        document.addEventListener("DOMContentLoaded", function () {
            standardProductAttributes_@(Model.Id).attrchange();
        });
    </script>
}